<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AdminLTE | moreMessage</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
		<link href="../css/main.css" rel="stylesheet" type="text/css" />
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.box-header{
    			border-left: 6px solid #3882FF;
    			margin: 20px 10px 0;
    			padding: 0 5px;
    			font-weight: bold;
    		}
    		table tr td span{
    			width: 100%;
    			display: inline-block;
    			text-align: right;
    		}
    		.star{
    			color: red;
    		}
    		.addLink{
    			border: 1px solid #3882FF;
    			color: #3882FF;
    			padding: 2px 5px;
    			width: 12%;
    			margin-top: 5px;
    		}
    		.style{
    			list-style: none;
    		}
    		.style li{
    			float: left;
    			border: 1px solid black;
    			padding: 2px 5px;
    			margin-right: 5px;
    		}
    		.image label{
    			width: 100px;
    			height: 100px;
    			float: left;
    			border: 1px solid #ccc;
    			text-align: center;
    			line-height: 100px;
    			margin-right: 10px;
    		}
    	</style>
    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <#include "../header.html"/>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <#include "../menu.html"/>

            <!-- Right side column. Contains the navbar and content of the page -->
           <aside class="right-side">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>修改客户</h1>
                    <ol class="breadcrumb">
                        <li><a href="doCustomerList">客户管理</a></li>
                        <li><a href="#">修改客户</a></li>
                    </ol>
                </section>
                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box">
                                <div class="box-header">客户基本信息 </div><!-- /.box-header -->
                                <div class="box-body">
                                    <table class="table table-bordered">
                                    	<span hidden id="id">${customer.id}</span>
                                        <tr>
                                            <td>
                                            	<span><label class="star">*</label>客户名</span>
                                            </td>
                                            <td>
                                            	<div class="form-group">
		                                            <input type="text" class="form-control" id="fullname" value="${(customer.fullname)!}" placeholder="Enter ..."/>
		                                            <span></span>
		                                        </div>
                                            </td>
                                            <td>
                                            	<span><label class="star">*</label>简称</span>
                                            </td>
                                            <td>
                                            	<div class="form-group">
		                                            <input type="text" class="form-control" id="abbreviation" value="${(customer.abbreviation)!}" placeholder="Enter ..."/>
		                                            <span></span>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            	<span><label class="star">*</label>客户分类</span>
                                            </td>
                                            <td>
                                            	<div class="form-group">
		                                            <select class="form-control" id="category">
		                                                <#if customer.category=="淘卖">
															<option value="001" selected>淘卖</option>
														<#else>
															<option value="001" >淘卖</option>
														</#if>
														<#if customer.category=="品牌">
															<option value="002" selected>品牌</option>
														<#else>
															<option value="002">品牌</option>
														</#if>
														<#if customer.category=="网红">
															<option value="003" selected>网红</option>
														<#else>
															<option value="003">网红</option>
														</#if>
		                                            </select>
		                                        </div>
                                            </td>
                                            <td>
                                            	<span><label class="star">*</label>等级</span>
                                            </td>
                                            <td>
                                            	<div class="form-group">
		                                            <select class="form-control" id="level">
		                                                <#if customer.level=="V1">
															<option value="001" selected>V1</option>
														<#else>
															<option value="001">V1</option>
														</#if>
														<#if customer.level=="V2">
															<option value="002" selected>V2</option>
														<#else>
															<option value="002">V2</option>
														</#if>
														<#if customer.level=="V3">
															<option value="003" selected>V3</option>
														<#else>
															<option value="003">V3</option>
														</#if>
		                                            </select>
		                                        </div>
                                            </td>
                                        </tr>
                                       	<tr>
                                       		<td><span>联系人</span></td>
                                       		<td colspan="3">
                                       			<table class="contacts">
                                       				<#list customer.contacts as contact>
                                       				<tr>
                                       					<td>
                                       						<div class="input-group input-group-md">
													            <div class="input-group-addon">
													            	<label class="star">*</label>姓名
													            </div>
													            <input type="text" value="${contact.linkman}" class="form-control">
													        </div>
                                       					</td>
                                       					<td>
                                       						<div class="input-group input-group-md">
													            <div class="input-group-addon">
													            	<label class="star">*</label>手机号
													            </div>
													            <input type="text" value="${contact.contact}" class="form-control">
													        </div>
                                       					</td>
                                       					<td>
                                       						<div class="input-group input-group-md">
													            <div class="input-group-addon">
													            	<label class="star">*</label>邮箱
													            </div>
													            <input type="text" value="${contact.email}" class="form-control">
													        </div>
                                       					</td>
                                       					<td>
                                       						<div class="input-group input-group-md">
													            <div class="input-group-addon">
													            	<label class="star">*</label>职位/部门
													            </div>
													            <input type="text" value="${(contact.deptPosition)!}" class="form-control">
													        </div>
                                       					</td>
                                       				</tr>
                                       				</#list>
                                       			</table>
												<div class="addLink">+添加更多联系人</div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>公司地址</span></td>
                                       		<td colspan="3">
                                       			<table>
                                       				<tr>
                                       					<td>
                                       						<div class="form-group">
					                                            <select id="provinceId" class="form-control">
					                                                <option value="">请选择</option>
					                                            </select>
			                                        		</div>
                                       					</td>
                                       					<td>
                                       						<div  class="form-group">
					                                            <select class="form-control" id="cityId">
					                                                <option value="">请选择</option>
					                                            </select>
			                                        		</div>
                                       					</td>
                                       					<td>
                                       						<div class="form-group">
					                                            <select id="areaId" class="form-control">
					                                                <option value="">请选择</option>
					                                            </select>
			                                        		</div>
                                       					</td>
                                       				</tr>
                                       			</table>
                                       			<div class="form-group">
		                                            <input type="text" class="form-control" id="detailAddress" value="${(customer.detailAddress)!}" placeholder="填写详细地址"/>
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>收件地址</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group">
		                                            <input type="text" class="form-control" value="${customer.deliveryAddress}" id="deliveryAddress" placeholder="默认公司地址"/>
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>网址</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group">
		                                            <input type="text" class="form-control" id="web" value="${(customer.web)!}" placeholder="http://www."/>
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>标签</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group">
		                                            <input type="text" id="label" class="form-control" />
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>备注</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group">
		                                            <textarea class="form-control" id="memo" value="${(customer.memo)!}" rows="3" placeholder="可填写最近状态、所需支持"></textarea>
		                                        </div>
                                       		</td>
                                       	</tr>
                                    </table>
                                    
                                </div><!-- /.box-body -->
                                
                                <div id="more">
                                <div class="box-header">填写更多完整信息 </div><!-- /.box-header -->
                                <div class="box-body">
                                    <table class="table table-bordered">
                                        <tr>
                                            <td width="8%">
                                            	<span>产品分类</span>
                                            </td>
                                            <td>
                                            	<div class="form-group" id="productCategory">
		                                            <select class="form-control">
		                                                <option>女装</option>
		                                                <option>男装</option>
		                                                <option>童装</option>
		                                            </select>
                                        		</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            	<span>风格标签</span>
                                            </td>
                                            <td>
                                            	<ul class="style" id="styleLabel">
                                            		<li>玉女
                                            			<a href="#">x</a>
                                            		</li>
                                            		<li>玉女
                                            			<a href="#">x</a>
                                            		</li>
                                            	</ul>
                                            </td>
                                        </tr>
                                       	<tr>
                                       		<td><span>图片附件</span></td>
                                       		<td>
                                       			<div class="form-group image">
		                                            <label for="exampleInputFile">附件</label>
		                                            <input type="file" id="exampleInputFile">
		                                            <p class="help-block">附件仅支持：jpg、png、bmp、rar、zip格式</p>
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>目标人群</span></td>
                                       		<td>
                                       			<div class="form-group">
		                                            <input type="text" id="targetConsumer" value="${(customer.targetConsumer)!}" class="form-control" />
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>销售渠道</span></td>
                                       		<td>
                                       			<div class="form-group">
		                                            <input type="text" id="saleChannel" value="${(customer.saleChannel)!}" class="form-control" />
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>预计年销售额</span></td>
                                       		<td>
                                       			<div class="form-group" style="width: 20%">
		                                            <input type="text" id="saleAmount" value="${(customer.saleAmount)!}" class="form-control"  />
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>上新频率</span></td>
                                       		<td>
                                       			<input id="updateFrequency" value="${(customer.updateFrequency)!}" style="border: 1px solid #ccc; height: 30px;" type="text" />&nbsp;&nbsp;每n周/月
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td><span>上新数量</span></td>
                                       		<td>
                                       			<input id="updateCount" value="${(customer.updateCount)!}" style="border: 1px solid #ccc; height: 30px;" type="text" />&nbsp;&nbsp;件
                                       		</td>
                                       	</tr>
                                    </table>
                                </div><!-- /.box-body -->
                                </div>
                                <div class="footer" style="margin: 30px 110px 20px;">
                                	<button type="button" id="update" class="btn btn-primary">确定修改</button>
                                	<button type="button" class="btn btn-default">放弃修改</button>
                                </div>
                            </div><!-- /.box -->
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
        <!-- jQuery 2.0.2 -->
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->
        <script src="../js/customer/customer.js" type="text/javascript"></script>  
    </body>
    <script>
    doReadArea(1,'provinceId');
	function selectProvince(){
		var opts=$('#provinceId').children();
		for(var i=0;i<opts.length;i++){
			if(opts.eq(i).val()==${customer.provinceId}){
				opts.eq(i).attr('selected','selected');
				doReadArea(${customer.provinceId},'cityId');
				selectCity();
				return;
			}
		}
	}
	selectProvince();
	function selectCity(){
		var opts=$('#cityId').children();
		for(var i=0;i<opts.length;i++){
			if(opts.eq(i).val()==${customer.cityId}){
				opts.eq(i).attr('selected','selected');
				doReadArea(${customer.cityId},'areaId');
				selectArea();
				return;
			}
		}
	}
	function selectArea(){
		var opts=$('#areaId').children();
		for(var i=0;i<opts.length;i++){
			if(opts.eq(i).val()==${customer.areaId}){
				opts.eq(i).attr('selected','selected');
				return;
			}
		}
	}
	<#if customer.label?size!=0>
	function setLabel(){
		<#list customer.label as l>
		$('#label').append(l+' ')
		</#list>
	}
	setLabel();
	</#if>
	<#if customer.productCategory?size!=0>
	function setProductCategory(){
		<#list customer.productCategory as p>
		$('#productCategory').append(p+' ')
		</#list>
	}
	setProductCategory();
	</#if>
	<#if customer.styleLabel?size!=0>
	function setStyleLabel(){
		<#list customer.styleLabel as s>
		$('#styleLabel').append(s+' ')
		</#list>
	}
	setStyleLabel();
	</#if>
	</script>
</html>
